<template>
  <div class="list-wrap">
    <Header v-py="10" class="header">
      <div class="header-center" slot="center">
        <div class="pic">
          <i class="icon icon-search"></i>
        </div>
        <input type="text" v-model="keyword" placeholder="雅马哈吉他">
      </div>
      <router-link to="/cart" class="header-right" slot="right">
        <i class="icon icon-white-cart"></i>
      </router-link>
    </Header>
    <div class="tab">
      <div class="item" :class="{active:filterType === 'all'}" @click="updateFilterType('all')">全部</div>
      <div class="item" :class="{active:filterType === 'sale'}" @click="sortList('sale')">销量</div>
      <div class="item" :class="{active:filterType === 'price'}" @click="sortList('price')">价格</div>
      <div class="item" :class="{active:filterType === 'jk'}" @click="updateFilterType('jk')">进口</div>
      <div class="item">筛选</div>
    </div>
    <ul class="list">
      <li v-for="product in doneList" :key="product.name">
        <router-link :to="`/product/${product.id}`">
          <div class="pic">
            <img v-lazy="product.pic" :alt="product.name">
          </div>
          <div class="caption">
            <div class="name">{{product.name}}</div>
            <div class="price">￥{{product.price | price}}</div>
            <div class="info">
              <span>运费:￥{{product.yf | price}}</span>
              <span>月销:￥{{ product.sale }}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import Header from "../components/Header.vue";
import { sortBy } from "lodash";
export default {
  components: {
    Header
  },
  computed: {
    doneList() {
      // 1. 拿出不为0的key
      if (Object.keys(this.sort).every(item => this.sort[item] === 0)) {
        return this.list;
      } else {
        let key = "";
        for (const k in this.sort) {
          if (this.sort[k] !== 0) {
            key = k;
          }
        }
        console.log('通过',key,'排序')
        return sortBy(this.list, item => {
         
          return item[key] * this.sort[key]
        });
      }
    }
  },
  data() {
    return {
      keyword: "",
      filterType: "all",
      sort: {
        //  如果是0 则不排序，如果是1，正序，如果是-1，倒序
        sale: 0,
        price: 0
      },
      list: [
        {
          id: 1,
          pic: require("../assets/img/products/6.jpg"),
          price: 29440,
          sale: 159,
          name: "珠江钢琴三角琴GP-148大福利卡飞机撒里的荆防颗粒撒大家发",
          yf: 10
        },
        {
          id: 2,
          pic: require("../assets/img/products/8.jpg"),
          price: 19800,
          sale: 357,
          name: "YAMAHA雅马哈立式钢琴...",
          yf: 10
        },
        {
          id: 3,
          pic: require("../assets/img/products/5.jpg"),
          price: 17900,
          sale: 586,
          name: "珠江钢琴德国工艺c2s立式...",
          yf: 10
        },
        {
          id: 4,
          pic: require("../assets/img/products/7.jpg"),
          price: 22800,
          sale: 37,
          name: "里特米勒立式钢琴J1-U...",
          yf: 10
        }
      ]
    };
  },
  created() {
    console.log(this.$route.query.keyword);
    this.keyword = decodeURI(this.$route.query.keyword);
  },
  methods: {
    updateFilterType(filterType) {
      this.filterType = filterType;
    },
    sortList(key) {
      this.updateFilterType(key);
      const sortKeys = Object.keys(this.sort);
      if (sortKeys.includes(key)) {
        if (this.sort[key] === 0) {
          switch (key) {
            case "sale":
              this.sort[key] = 1;
              this.sort.price = 0;
              break;
            case "price":
              this.sort[key] = 1;
              this.sort.sale = 0;
              break;
          }
        } else {
          switch (key) {
            case "sale":
              this.sort[key] = this.sort[key] === 1 ? -1 : 1;
              this.sort.price = 0;
              break;
            case "price":
              this.sort[key] = this.sort[key] === 1 ? -1 : 1;
              this.sort.sale = 0;
              break;
          }
        }
        console.log(this.sort);
      }
    }
  }
};
</script>

